import React, { useEffect, useState } from 'react';
import styles from './index.module.scss';
import Typography from '../../typography';
import Lamp from '../../lamp';
import TipLi from './tips-li';
import results from '../../../results';

const { Header } = Typography;
const StudyStyleTips = ({ type, data }) => {
  const [tipTitle, setTipTitle] = useState('');
  const [tips, setTips] = useState([]);
  useEffect(() => {
    setTips(results[data].tips);
    setTipTitle(results[data].tipTitle);
  }, []);

  return (
    <div className={styles.studyStyleTips}>
      <div className={styles.head}>
        <Lamp lampType={type} />
        <Header type="recommentTitle">{tipTitle}</Header>
      </div>
      {tips.map((item) => {
        return <TipLi key={item}>{item}</TipLi>;
      })}
    </div>
  );
};

export default StudyStyleTips;
